<template>
  <div class="quotation-center f-cb" :class="OptionShow?'showis':''">
    <div class="left fl">
      <div class="widthLeft">
        <ul class="f-cb LeftList">
          <li
            v-for="(item,index) in navList"
            :key="index"
            :class="keyNav==index?'on':''"
            @click="navListClick(index)">
            <router-link to>
              <img class="menu_icon" :src="keyNav==index?item.imgHover:item.img" alt />
            </router-link>
          </li>
        </ul>
        <left-list ref="leftList" :KeyNavs="keyNav" @Details_dataClick="Details_dataList"></left-list>
      </div>
    </div>
    <div class="center fl">
      <info-stock @reflashs="reflashs" :stockCode="Details_data" @optionClick="OptionChange" :showis="OptionShow"></info-stock>
    </div>
    <div class="right fr">
      <AccountRight :StockData="StockData" :SearchShowIs="SearchShowIs"></AccountRight>
    </div>
  </div>
</template>

<script>
import AccountRight from "@/components/account/right/AccountRight.vue";
import LeftList from "@/components/quotation/left_list.vue";
import infoStock from "@/components/info/info_stock.vue";
export default {
  components: {
    AccountRight,
    LeftList,
    infoStock
  },
  data() {
    return {
      keyNav: 0,
      navList: [
        {
          img: require("@/assets/img/icon_sch.png"),
          imgHover: require("@/assets/img/icon_sc.png")
        },
        {
          img: require("@/assets/img/icon_zj.png"),
          imgHover: require("@/assets/img/icon_zjxz.png")
        }
      ],
      StockData:{},
      OptionShow:false,
      SearchShowIs:false,
      Details_data:this.$store.state.index.StockData,
    };
  },
  mounted() {},
  methods: {
    //   2个大的切换
    navListClick(index) {
      this.keyNav = index;
    },
    Details_dataList(row){
      var StockData={
        securityType: row.securityType,
        symbol: row.symbol,
        market: row.market,
      }
      this.$store.dispatch("SetStockData",StockData);
    },
    OptionChange(){
      this.OptionShow =this.OptionShow?false:true;
      //console.log(this.OptionShow)
    },
    // 刷新自选列表
    reflashs() {
      this.$refs.leftList.zixuan();
    }
  },
  watch:{
    '$store.state.index.StockData':{
      handler(val,old){
       this.Details_data = val;
      }
    }
  },
}
</script>

<style lang="less">
  .quotation-center{
    width: 100%;
    height: 100%;
    background: @deepBg;
    overflow: hidden;
    .right{
      width: 380px;
      height: 100%;
      overflow: auto;
      border-left: 2px solid @DarkBorderLine;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .left{
      width: 340px;
      height: 100%;
      overflow: hidden;
      .widthLeft{
        width: 340px;
        height: 100%;
        overflow: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-right: 2px solid @DarkBorderLine;
      }
      ul.LeftList{
        width: 100%;
        text-align: center;
        border-bottom: 1px solid @LightBorderLine;
        li{
          width: 50%;
          float: left;
          position: relative;
          overflow: hidden;
          text-align: center;
          height:39px;
          line-height:39px;
          a{
            display:block;
            width: 100%;
          }
          .menu_icon {
            height: 22px;
            width: 22px;
          }
        }
      }
    }
    .center{
      width:calc(100% - 720px);
      overflow: auto;
      height: 100%;
    }
  }
  .quotation-center.showis{
    .left{
      width: 0px;
    }
    .center{
      width:calc(100% - 380px);
    }
  }
</style>